/**
* @desc:  人员管理-同步名单
* @author qiankui
* @date 2023-4-20 16:36:48
*/
<template>
    <el-dialog :close-on-click-modal="false" :visible="syncFlag" class="zdy-dialog" width="1000px" :title="$t('Synchronization list')"
               :before-close="handleCloseDialog">
        <div class="el-dialog-div">
            <!--在线设备-->
            <div class="treeView">
                <div class="searchView centerPersonView">
                    <el-input
                            class="searchInput"
                            size="small"
                            prefix-icon="el-icon-search"
                            :placeholder="placeholderTips"
                            v-model="filterTextDev">
                    </el-input>
                    <!--在线设备列表设置成单选后，此处应该取消-->
                    <!--<el-checkbox @change="leftPersonChange" :disabled="!devList.length" v-model="leftPersonAll">{{this.i18n.t('All')}}</el-checkbox>-->
                </div>
                <el-tree
                        class="filter-tree"
                        show-checkbox
                        :data="devList"
                        node-key="id"
                        :props="devListProps"
                        :check-on-click-node="true"
                        :check-strictly="false"
                        default-expand-all
                        @check="devcheck"
                        :filter-node-method="filterNodeDev"
                        ref="devTree">
                </el-tree>
            </div>
            <!--人员列表（根据设备查询人员）-->
            <div class="treeView" v-loading="personListLoading">
                <div class="searchView centerPersonView">
                    <el-input
                            size="small"
                            class="searchInput"
                            prefix-icon="el-icon-search"
                            :placeholder="placeholderTips"
                            v-model="filterText">
                    </el-input>
                    <el-checkbox @change="conterPersonChange" :disabled="!getDevByPersonList.length" v-model="conterPersonAll">{{this.i18n.t('All')}}</el-checkbox>
                </div>
                <!--<el-tree-->
                        <!--class="filter-tree"-->
                        <!--show-checkbox-->
                        <!--node-key="jobNumber"-->
                        <!--:check-on-click-node="true"-->
                        <!--:data="getDevByPersonList"-->
                        <!--:props="defaultProps"-->
                        <!--default-expand-all-->
                        <!--@check-change="centerCheck"-->
                        <!--:filter-node-method="filterNode"-->
                        <!--ref="personTree">-->
                <!--</el-tree>-->

                <vl-tree show-checkbox :height="500" empty-text="请在左侧选择设备" node-key="personnelCode" ref="personTree" class="personList filter-tree"
                         :props="devPersionListProps" :data="getDevByPersonList" >
                    <div class="custom-tree-node" slot-scope="{ node, data }">

                            <span>
                                <span style="width: 200px;display: inline-block" :title="node.label" class="noDepartmentName ellipsis">{{ node.label }}</span>
                                <!--<el-tag style="margin-right: 3px" type="info" size="mini" v-if="data.sex==undefined">{{getOrgPersionCount(data.children)}}</el-tag>-->
                                <!--<el-tag type="info" size="mini" v-if="data.sex==undefined">{{data.children.length}}</el-tag>-->
                            </span>

                    </div>
                </vl-tree>

                <el-button id="move" :loading="moveLoading" @click="moveRight" icon="el-icon-d-arrow-right" circle></el-button>
            </div>
            <!--已选人员-->
            <div class="treeView person">
                <div class="searchView centerPersonView">
                    <span style="line-height: 35px">{{this.i18n.t('selected')}} {{selectedPersonList.length}}</span>
                    <!--清空-->
                    <i :title="$t('empty')"  v-if="selectedPersonList.length" @click="clearAll" class="el-icon-delete clearBtn"></i>
                </div>
                <div class="personView filter-tree">
                    <!--<ul>-->
                        <!--<li v-for="(item,index) in selectedPersonList" :key="item.jobNumber" class="personList">-->
                            <!--<span>{{item.name}}</span>-->
                            <!--<i :title="$t('delete')" @click="deleteSelectedList(item)" class="el-icon-error"></i>-->
                        <!--</li>-->
                        <!--<p class="el-tree__empty-text" v-if="!selectedPersonList.length">{{this.i18n.t('No data available')}}</p>-->
                    <!--</ul>-->

                    <vl-tree style="" empty-text="请在左侧选择人员" node-key="personnelCode" ref="selectedTree" class="personList"
                             :height="500" :props="devPersionListProps" :data="selectedPersonList" >
                        <div class="custom-tree-node" slot-scope="{ node, data }">

                            <span style="width: 200px;display: inline-block" :title="node.label" class="noDepartmentName ellipsis">{{ node.label }}</span>
                            <!--<el-tag style="margin-right: 3px" type="info" size="mini" v-if="data.sex==undefined">{{getOrgPersionCount(data.children)}}</el-tag>-->
                            <!--<el-tag type="info" size="mini" v-if="data.sex==undefined">{{data.children.length}}</el-tag>-->
                            <!--删除-->
                            <i @click="deleteSelectedList(data)" class="el-icon-delete treeToolIcon" :title="$t('delete')"></i>

                        </div>
                    </vl-tree>

                </div>
            </div>
        </div>
        <br>
        <div class="footBtnBox">
            <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
            <el-button size="small" type="primary" :loading="saveloading" @click="submitForm">{{this.i18n.t('save')}}</el-button>
        </div>
        <syncConflict ref='syncConflictDialog'
                      :conflictTableRow='conflictTableRow'
                :syncConflictFlag.sync='syncConflictFlag' v-if='syncConflictFlag'></syncConflict>
    </el-dialog>
</template>

<script>
    import { getGuid} from "@/assets/common/js/global";
    import syncConflict from './syncConflictDialog.vue';
    import {deviceinfoGetallonlinedevices} from "@/api/pcmj/sbsj";
    import {personnelinfoGetpersonnelinfosbydevicecodes,personnelinfoBatchsavedevicetpersonnels} from "@/api/pcmj/zzxx";
    export default {
        name: "synchronous",
        components: {
            syncConflict
        },
        props: {
            syncFlag: {
                type: Boolean,
                default: false
            },
            editTableRow: {
                type: Object,
                defautl: () => {
                    return {}
                }
            }
        },
        watch: {
            filterText(val) {
                this.$refs.personTree.filter(val);
            },
            filterTextDev(val) {
                this.$refs.devTree.filter(val);
            }
        },
        data() {
            return {
                conflictTableRow:[],
                syncConflictFlag:false,
                leftPersonAll:false,
                conterPersonAll:false,
                personListLoading:false,
                saveloading:false,
                moveLoading:false,
                getDevByPersonList:[],
                selectedPersonList:[],
                selectedDevList:[],
                filterTextDev:'',
                devList:[],
                placeholderTips:this.i18n.t('Please enter keywords'),
                filterText:'',
                devListProps:{
                    children: 'children',
                    label: 'deviceName'
                },
                devPersionListProps:{
                    value:"personnelCode",
                    children: 'children',
                    label: 'name',
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            leftPersonChange(val){
                console.log(val,this.devList);
                if(val){
                    this.$refs.devTree.setCheckedNodes(this.devList);
                }else{
                    this.$refs.devTree.setCheckedKeys([]);
                }
                
            },
            conterPersonChange(val){
                if(val){
                    console.log(this.$refs.personTree);
                    console.log(this.getDevByPersonList);
                    if (this.getDevByPersonList.length){
                        var selectedAll=[]
                        this.getDevByPersonList.map(item=>{
                            selectedAll.push(item.personnelCode)
                        })
                    }
                    this.$refs.personTree.setCheckedKeys(selectedAll);
                }else{
                    this.$refs.personTree.setCheckedKeys([]);
                }
            },
            personnelinfoBatchsavedevicetpersonnels(params){
                personnelinfoBatchsavedevicetpersonnels(params).then((res) => {
                    // 刷新父页面的数据
                    this.$parent.updatePageData()
                    if (res.code == 200) {
                        // res.data代表同步过程中有没有冲突，如果没有冲突，res.data就是null
                        if(res.data==null){
                            // 同步成功
                            this.W.$tips("success", this.i18n.t('Sync successful'));
                            // 关闭弹窗
                            this.$emit("update:syncFlag",false);
                        }else{
                            res.data.map(item=>{
                                item.guid=getGuid()
                            })
                            this.conflictTableRow=res.data
                            // 显示冲突弹窗
                            this.syncConflictFlag=true
                        }

                    }
                }).catch().finally(() => {
                    this.saveloading=false
                })
            },
            // 获取选中的人员
            getSelectedPersonList(){
                return this.$refs.personTree.getCheckedNodes()
            },
            // 移动按钮
            moveRight(){
                this.moveLoading=true
                var checkedKeys=this.getSelectedPersonList()
                // console.log(checkedKeys);
                if(checkedKeys.length){
                    var result=[]
                    checkedKeys.map(item=>{
                        result.push(item)
                    })
                    this.selectedPersonList=result
                    console.log('移动的数据', this.selectedPersonList);
                }else{
                    // 请选择要同步的人员
                    this.W.$tips("warning", this.i18n.t('Please select the person to synchronize'));
                }
                setTimeout(()=>{
                    this.moveLoading=false
                },200)
            },
            // 根据设备编号列表获取人员名单信息
            personnelinfoGetpersonnelinfosbydevicecodes(params){
                personnelinfoGetpersonnelinfosbydevicecodes(params).then((res) => {
                    if (res.code === 200) {
                        this.getDevByPersonList=res.data
                        // debugger
                        // if(res.data.length){
                        //     this.devList=res.data
                        // }else{
                        //     this.devList=[]
                        // }

                    }
                }).catch(err=>{
                    this.clearTree()
                }).finally(() => {
                    this.personListLoading=false
                })
            },
            // 清空人员列表和已选的人员列表
            clearTree(){
                this.personListLoading=false
                this.selectedPersonList=[]
                this.getDevByPersonList=[]
            },
            centerCheck(data,val){
                if(!val){
                    // 中间穿梭框上面的全选按钮
                    this.conterPersonAll=false
                }
            },
            refreshDevListTree(){
                this.selectedPersonList=[]
                if(this.selectedDevList.length){
                    // 解决完冲突列表后，根据刚才选中的设备，重新拉取一次此设备下的人员名单
                    this.personnelinfoGetpersonnelinfosbydevicecodes([this.selectedDevList[0].deviceCode])
                    // 清空全选状态
                    this.$refs.personTree.setCheckedKeys([]);
                    // 清空全选按钮选中状态
                    this.conterPersonAll=false
                }
            },
            devcheck(data,val){
                console.log(data,val);

                if(!val){
                    this.clearTree()
                }

                // 树单选
                this.$refs.devTree.setCheckedKeys([])
                this.$refs.devTree.setCheckedKeys([data.id])

                this.selectedDevList=this.$refs.devTree.getCheckedNodes()
                var result=[]
                if(this.selectedDevList.length){
                    this.selectedDevList.map(item=>{
                        result.push(item.deviceCode)
                    })
                }
                this.personListLoading=true
                console.log('选中的设备',result);
                // 中间穿梭框上面的全选按钮
                this.leftPersonAll=false
                this.conterPersonAll=false
                if(result.length){
                    this.personnelinfoGetpersonnelinfosbydevicecodes(result)
                }else{
                    this.clearTree()
                }

            },
            // 清空全部已选择的人员
            clearAll(){
                // 确定要清空已选列表吗
                this.W.$myConfirm('warning', this.i18n.t('Are you sure you want to clear the selected list'))
                    .then(async () => {
                        this.selectedPersonList=[]
                        // 中间穿梭框上面的全选按钮
                        this.leftPersonAll=false
                        this.conterPersonAll=false
                        // this.$refs.devTree.setCheckedKeys([]);
                        this.$refs.personTree.setCheckedKeys([]);
                    })
                    .catch(() => {
                    });
            },
            // 已选列表删除
            deleteSelectedList(row){
                console.log(row);
                if(row.name!==null){
                    this.selectedPersonList.map((item,index,arr)=>{
                        if(item.name==row.name){
                            // 删除当前点击项
                            arr.splice(index,1)
                            // 左侧组织树取消被点击的选中状态
                            this.$refs.personTree.setChecked(row.personnelCode,false)
                        }
                    })
                    // 中间穿梭框上面的全选按钮
                    this.leftPersonAll=false
                    this.conterPersonAll=false
                }
            },
            filterNodeDev(value, data) {
                if (!value) return true;
                return data.deviceName.indexOf(value) !== -1;
            },
            // 获取在线设备
            deviceinfoGetallonlinedevices(){
                deviceinfoGetallonlinedevices().then((res) => {
                    if (res.code === 200) {
                        // debugger
                        if(res.data.length){
                            // 模拟在线设备，测试多设备列表单选
                            // var test=[
                            //     {
                            //         deviceCode: "3",
                            //         deviceName: "Maxvision3",
                            //         deviceType: 2,
                            //         deviceVersions: null,
                            //         id: "36442bd48-597f-4a83-8ede-77676eac7406",
                            //         ip: null,
                            //         isOnline: true,
                            //         mac: null,
                            //         port: 0
                            //     },
                            //     {
                            //         deviceCode: "5",
                            //         deviceName: "Maxvision5",
                            //         deviceType: 2,
                            //         deviceVersions: null,
                            //         id: "56442bd48-597f-4a83-8ede-77676eac7406",
                            //         ip: null,
                            //         isOnline: true,
                            //         mac: null,
                            //         port: 0
                            //     }
                            // ]
                            // res.data= res.data.concat(test)
                            this.devList=res.data
                        }else{
                            this.devList=[]
                        }

                    }
                }).catch(err=>{

                }).finally(() => {

                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            handleCloseDialog() {
                // 刷新父页面的数据
                this.$parent.updatePageData()
                this.$emit('update:syncFlag', false);
                this.$emit('update:editTableRow', null);
            },
            submitForm() {
                this.selectedDevList=this.$refs.devTree.getCheckedNodes()
                console.log('人员名单',this.selectedPersonList);
                console.log('在线设备', this.selectedDevList);
                if(!this.selectedPersonList.length){
                    // 请在左侧选择人员
                    this.W.$tips("warning", this.i18n.t('Please select personnel on the left side'));
                    return
                }
                if(!this.selectedDevList.length){
                    // 请在右侧选择要下发的设备
                    this.W.$tips("warning", this.i18n.t('Please select the device to be distributed on the right side'));
                    return
                }
                this.saveloading=true
                this.personnelinfoBatchsavedevicetpersonnels(this.selectedPersonList)
            }
        },
        mounted(){
            // 获取在线设备
            this.deviceinfoGetallonlinedevices()
        }
    }
</script>

<style lang="scss" scoped>
    .el-dialog-div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 550px;
        overflow: hidden;

        .searchView {
            background: #e6eaf5;
            padding: 10px 15px;
            height: 52px;
            position: relative;
            box-sizing:border-box;
            :deep(.searchInput.el-input .el-input__inner) {
                border-radius: 50px;
                font-size: 14px;
            }
            :deep(.el-input__inner::placeholder) {
                font-size: 14px;
            }
            .searchInput {
                .el-input__inner{
                    font-size: 11px;
                }
            }
            i:hover{
                cursor: pointer;
            }
            &.centerPersonView{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .searchInput{
                    margin-right: 10px;
                }
            }
        }

        .importSelect {

        }

        .filter-tree {
            background: #f0f2f7;
            height: 500px;
        }
        .personView,.filter-tree{
            overflow-y: hidden !important;
            /*border: 1px solid red;*/
            .personList{
                /*padding: 5px 15px;*/
                position: relative;
                border: 1px solid transparent;
                border-bottom: 1px solid #e5e8ef;
                box-sizing: border-box;
                i{
                    color: #babfcf;
                    float: right;
                    cursor: pointer;
                }
                /*&:hover{*/
                    /*!*background:#9aa9bf;*!*/
                    /*border: 1px solid #babfcf;*/
                /*}*/
            }
        }
        .treeView{
            width: 300px;
            height:100%;
            margin: 0 10px;
            position: relative;
            /*display: inline-block;*/
            /*border: 1px solid green;*/
            /*padding: 0 !important;*/
            box-sizing: border-box;
            &.person{
                margin-left: 100px;
            }
            #move{
                position: absolute;
                right: -75px;
                top: 45%;
            }
        }
        .clearBtn{
            float: right;margin-top: 10px;margin-right: 5px
        }
    }
    ::v-deep .ellipsis{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>